{extend name='admin@main'}
{block name="style"}
<style>
    #container {height: 500px; }

</style>
<style>

    .content-window-card {
        position: relative;
        box-shadow: none;
        bottom: 0;
        left: 0;
        width: auto;
        padding: 0;
    }

    .content-window-card p {
        height: 2rem;
    }

    .custom-info {
        border: solid 1px silver;
    }

    div.info-top {
        position: relative;
        background: none repeat scroll 0 0 #F9F9F9;
        border-bottom: 1px solid #CCC;
        border-radius: 5px 5px 0 0;
    }

    div.info-top div {
        display: inline-block;
        color: #333333;
        font-size: 14px;
        font-weight: bold;
        line-height: 31px;
        padding: 0 10px;
    }

    div.info-top img {
        position: absolute;
        top: 10px;
        right: 10px;
        transition-duration: 0.25s;
    }

    div.info-top img:hover {
        box-shadow: 0px 0px 5px #000;
    }

    div.info-middle {
        font-size: 12px;
        padding: 10px 6px;
        line-height: 20px;
    }

    div.info-bottom {
        height: 0px;
        width: 100%;
        clear: both;
        text-align: center;
    }

    div.info-bottom img {
        position: relative;
        z-index: 104;
    }

    span {
        margin-left: 5px;
        font-size: 11px;
    }

    .info-middle img {
        float: left;
        margin-right: 6px;
        width: 65px;
        height: 65px;
    }
</style>
{/block}
{block name="content"}
<div class="think-box-shadow">
    <!--{include file='map/index_search'}-->
    <textarea class="layui-hide" id="cleaner-list">{$list|raw|default=''}</textarea>
    <div id="container"></div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    //获取保洁员信息
    var list = JSON.parse(document.getElementById("cleaner-list").value || '[]') || {};
    console.log(list);
    var map = new AMap.Map('container',{
        zoom:16,//级别
        center: [106.491476,29.538544],//中心点坐标
        resizeEnable: true,
        // zoomEnable: false
        showLabel: false //不显示地图文字标记
    });
    var infoWindow = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        // content: createInfoWindow(title,content.join("<br/>")),
        offset: new AMap.Pixel(16, -45)
    });
    for (var i = 0; i < list.length; i++) {
        // 创建一个 Icon
        var startIcon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(28, 28),
            // 图标的取图地址
            image: list[i].work_headimg,
            // 图标所用图片大小
            imageSize: new AMap.Size(28, 28),
            // 图标取图偏移量
            // imageOffset: new AMap.Pixel(-9, -3)
        });
        //创建标记物
        var marker = new AMap.Marker({
            icon: startIcon,
            position: new AMap.LngLat(list[i].lng,list[i].lat),
            map: map
        });
        // marker.title= list[i].name + '<span style="font-size:11px;color:#F00;">'+ (list[i].work_state ? '工作中' : '休息中')+'</span>';
        marker.title = list[i].name;
        if(list[i].work_state)
        {
            marker.title += '<span style="font-size:11px;color:#F00;">工作中</span>';

        } else {
            marker.title += '<span style="font-size:11px;color:deepskyblue;">休息中</span>';
            marker.title += '<a class="layui-btn layui-btn-xs layui-btn-normal margin-left-10" data-title="分单" data-modal=\'{:url("distribute")}?id='+list[i].id+'\'>分单</a>';
        }
        marker.content = [];
        marker.content.push("<img src='"+ list[i].work_headimg +"'>联系电话：" + list[i].phone);
        marker.content.push("地址：" + list[i].address);
        marker.on('click', markerClick);
        marker.emit('click', {target: marker});
    }


    function markerClick(e) {
        createInfoWindow(e.target.title,e.target.content.join('<br/>'));
        infoWindow.open(map, e.target.getPosition());
    }
    function createInfoWindow(title,content)
    {
        var info = document.createElement("div");
        info.className = "custom-info input-card content-window-card";
        //可以通过下面的方式修改自定义窗体的宽高
        // info.style.width = "400px";
        // info.style.height = "50px";
        // 定义顶部标题
        var top = document.createElement("div");
        var titleD = document.createElement("div");
        var closeX = document.createElement("img");
        top.className = "info-top";
        titleD.innerHTML = title;
        closeX.src = "https://webapi.amap.com/images/close2.gif";
        closeX.onclick = closeInfoWindow;

        top.appendChild(titleD);
        top.appendChild(closeX);
        info.appendChild(top);
        // 定义中部内容
        var middle = document.createElement("div");
        middle.className = "info-middle";
        middle.style.backgroundColor = 'white';
        middle.innerHTML = content;
        info.appendChild(middle);

        // 定义底部内容
        var bottom = document.createElement("div");
        bottom.className = "info-bottom";
        bottom.style.position = 'relative';
        bottom.style.top = '0px';
        bottom.style.margin = '0 auto';
        var sharp = document.createElement("img");
        sharp.src = "https://webapi.amap.com/images/sharp.png";
        bottom.appendChild(sharp);
        info.appendChild(bottom);
        infoWindow.setContent(info);
        return info;
    }
    //关闭信息窗体
    function closeInfoWindow() {
        map.clearInfoWindow();
    }

    // 同时引入工具条插件，比例尺插件和鹰眼插件
    AMap.plugin([
        'AMap.ToolBar',
        'AMap.Scale',
        'AMap.OverView',
        'AMap.MapType',
        'AMap.Geolocation',
    ], function(){
        // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
        map.addControl(new AMap.ToolBar());

        // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
        map.addControl(new AMap.Scale());

        // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
        map.addControl(new AMap.OverView({isOpen:true}));

        // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
        // map.addControl(new AMap.MapType());

        // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
        map.addControl(new AMap.Geolocation());
    });

</script>
{/block}